import { border, primaryColor } from "../utils/public.js";
class TabPane extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    box-sizing: border-box;
                    margin-left: 10px;
                }
                .cp-tab-pane{
                    display: block;
                }
                .cp-tab-header{

                }
            </style>
            
            <div class="cp-tab-pane" title="${this.title}">
                <div hidden>
                    <slot name="title">${this.title}</slot>
                </div>
                
                <slot></slot>
            </div>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$tabPane = this._shadowRoot.querySelector(".cp-tab-pane");
    }

    static get observedAttributes() {
        return ["title"];
    }

    get title() {
        return this.getAttribute("title");
    }

    set title(value) {
        this.setAttribute("title", value);
    }

    /**
     * 获取所有的兄弟元素且name属性相同
     * @param {String} targetEle 元素的nodeName
     * @param {String} name 元素的name属性
     * @returns {Array} NodeList
     */
    getSiblings(targetEle, name) {
        const arr = this.parentNode.childNodes || [];
        let tmp = [];

        for (let i = 0, len = arr.length; i < len; i++) {
            if (arr[i].nodeName.toLowerCase() === targetEle && arr[i] !== this) {
                if (name) {
                    if (arr[i].name === name) {
                        tmp.push(arr[i]);
                    }
                } else {
                    tmp.push(arr[i]);
                }
            }
        }

        if (name) {
        }
        return tmp;
    }

    connectedCallback() {
        console.log(this.$tabPane, "tabPane");
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render(name, newVal);
    }
    render(name, newVal) {
        if (name === "title") {
            this.title = newVal;
        }
    }
}

if (!customElements.get("cp-tab-pane")) {
    customElements.define("cp-tab-pane", TabPane);
}
